<!--
 * @Author: fisher luthor-li@qq.com
 * @Date: 2024-05-06 14:43:47
 * @LastEditors: fisher luthor-li@qq.com
 * @LastEditTime: 2024-09-09 10:11:53
 * @FilePath: \psmaster_front\src\modules\cloud\projManager\index.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="moduleMain">
    <div class="operate">
      <el-input
        v-model="search"
        placeholder="请输入项目名称"
        class="input-with-select"
      >
        <template #append>
          <el-button :icon="Search" @click="searchInstance" />
        </template>
      </el-input>
      <el-button type="primary" @click="addProject" style="margin-left: auto">
        新增项目
      </el-button>
      <el-button type="primary" @click="updateProject">修改项目</el-button>
      <el-button type="danger" @click="deleteProject">删除项目</el-button>
    </div>
    <div class="table">
      <el-table
        stripe
        :data="tableData"
        style="width: 100%; height: calc(100% - 60px)"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column property="name" label="项目名称" width="120" />
        <el-table-column property="status" label="项目状态" width="120" />
        <el-table-column property="ownerName" label="负责人" width="120" />
        <el-table-column property="streamList" label="视频流列表" width="240" />
        <el-table-column property="description" label="项目描述" />
      </el-table>
      <el-pagination
        class="table_page"
        :current-page="pageNo"
        :page-size="pageSize"
        :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <ProjDialog ref="projDialog" @updateList="updateList"></ProjDialog>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted } from 'vue';
import { Search } from '@element-plus/icons-vue';
import ProjDialog from './projDialog.vue';
import { useDeleteConfirmation } from '@/hooks/useDeleteConfirm';
import { useAxios } from '@/hooks/useAxios';
const { post } = useAxios();
const { deleteData } = useDeleteConfirmation();
const search = ref('');
const searchInstance = () => {
  getData();
};
/**
 * @description: 获取列表数据
 * @return {*}
 */
let tableData = reactive([]);
let selectData = reactive([]);
let selectId = reactive([]);
let total = ref(0);
let pageNo = ref(1);
let pageSize = ref(10);
onMounted(() => {
  getData();
});
const getData = () => {
  const data = {
    pageNo: pageNo.value,
    pageSize: pageSize.value,
    name: search.value,
  };
  post('/project/getProjectList', data).then(res => {
    if (res?.status) {
      // 先清空，后赋值,表格数据赋值
      tableData.length = 0;
      tableData.push(...res.data);
      total.value = res.page.total;
    }
  });
};
const handleSelectionChange = val => {
  console.log('val', val);

  selectId.length = 0;
  selectData.length = 0;
  val.forEach(item => {
    selectId.push(item.id);
    selectData.push(item);
  });
};
const handleSizeChange = val => {
  pageSize.value = val;
  getData();
};
const handleCurrentChange = val => {
  pageNo.value = val;
  getData();
};
const projDialog = ref();
const addProject = () => {
  console.log('addProject', projDialog.value.dialogFormVisible);
  projDialog.value.dialogFormVisible = true;
  projDialog.value.initForm('add');
};

const updateProject = () => {
  if (selectData.length == 0) {
    ElNotification({
      title: 'Info',
      message: '请先选择项目，在进行修改操作！',
      type: 'info',
    });
    return;
  } else if (selectData.length > 1) {
    ElNotification({
      title: 'Info',
      message: '一次只能修改一组数据！',
      type: 'info',
    });
    return;
  } else {
    projDialog.value.dialogFormVisible = true;
    projDialog.value.initForm('edit', selectData[0]);
  }
};
const deleteProject = () => {
  deleteData(selectId, data => {
    return post('/project/deleteProject', {
      ids: data,
    }).then(() => {
      selectId.length = 0;
      selectData.length = 0;
      getData();
    });
  });
};
const updateList = () => {
  getData();
};
</script>
<style scoped>
.moduleMain {
  padding: 20px;
  box-sizing: border-box;
}

.operate {
  width: 100%;
  height: 80px;
  display: flex;
  align-items: center;
  /* justify-content: flex-end; */
}
.input-with-select {
  width: 200px;
  height: 38px;
}
.table {
  height: calc(100% - 100px);
}
/* :deep(.el-table) {
    height: calc(100% -60px);
  } */
.table_page {
  height: 60px;
  justify-content: flex-end;
}
</style>
